<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入上框的图片 -->
    <link rel="shortcut icon" href="./favicon.ico" />
    <!-- 引入重置css -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- font图标css -->
    <link rel="stylesheet" href="./css/font/iconfont.css">
    <!-- 引入自己的css -->
    <link rel="stylesheet" href="./css/index.css">
    <title>淘宝网 - 淘！我喜欢</title>
    <!-- 设置关键字 方便seo优化 利于搜索引擎搜到你 -->
    <meta name="keyword"
        content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
    <!-- 网站自我介绍 -->
    <meta name="description"
        content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
</head>

<body>
    <!-- 顶部导航栏开始 -->
    <div class="top-bar">
        <!-- 版心 -->
        <div class="w bar-in">

            <!-- 左侧列表 -->
            <div class="bar-l">
                <ul>
                    <li class="china">中国大陆
                        <span class="iconfont icon-xiala"></span>
                    </li>
                    <li><a href="javascript:;">亲，请登录</a></li>
                    <li><a href="javascript:;">免费注册</a></li>
                    <li><a href="javascript:;">手机逛淘宝</a></li>
                    <li><a href="javascript:;">网页无障碍</a></li>
                </ul>
            </div>

            <!-- 右侧列表 -->
            <div class="bar-r">
                <ul>
                    <li><a href="javascript:;">我的淘宝
                            <span class="iconfont icon-xiala"></span>
                        </a></li>
                    <li><a class="gouwuche" href="javascript:;">
                            <span class="iconfont icon-gouwuchefill"></span>
                            购物车
                        </a>
                    </li>
                    <li class=" xing ">
                        <span class="iconfont icon-shoucang"></span>
                        <a href="javascript:;">

                            收藏夹
                            <div>
                                <span class="iconfont icon-xiala"></span>
                            </div>
                        </a>
                    </li>
                    <li><a href="javascript:;">商品分类</a></li>
                    <li><a href="javascript:;">免费开店
                        </a></li>
                    <li class="line">|</li>
                    <li><a href="javascript:;">千牛卖家中心
                            <span class="iconfont icon-xiala"></span>
                        </a></li>
                    <li><a href="javascript:;">联系客服
                            <span class="iconfont icon-xiala"></span>
                        </a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部导航栏结束 -->

    <!-- 大盒子开始 -->
    <div class="tb-big">

        <!-- 搜索开始 -->
        <div class="header w">
            <!-- 左侧logo开始 -->
            <h1 class="logo">
                <a href="index.html">
                    <img src="./images/logo.png" alt="">
                </a>
            </h1>
            <!-- 左侧logo结束 -->

            <!-- 中间的搜索开始 -->
            <div class="search">
                <form action="xxx.php">
                    <!-- 宝贝开始 -->
                    <div class=" baby">
                        宝贝<span class="iconfont icon-xiala"></span>

                    </div>
                    <!-- 宝贝结束 -->

                    <!-- 文本框开始 -->
                    <input class="clearfix" type="text" placeholder="小白鞋">
                    <button>搜索</button>
                    <!-- 文本框结束 -->
                </form>


                <!-- 搜索框下面的文字开始 -->
                <div class="tb-search-down">
                    <a href="">新款连衣裙</a>
                    <a href="">四件套</a>
                    <a href="">潮流T恤</a>
                    <a href="">时尚女鞋</a>
                    <a href="">短裤</a>
                    <a href="">半身裙</a>
                    <a href="">男士外套</a>
                    <a href="">墙纸</a>
                    <a href="">行车记录仪</a>
                    <a href="">新款男鞋</a>
                </div>
                <!-- 搜索框下面的文字结束 -->

            </div>
            <!-- 中间的搜索结束 -->

            <!-- 右侧维码开始 -->
            <div class="ewm">
                <p>下载淘宝</p>
                <img src="./images/download.png" alt="">
            </div>
            <!-- 右侧二维码结束 -->


        </div>
        <!-- 搜索结束 -->



        <!-- 内容开始 -->
        <div class="tb-content w">
            <!-- 上边导航部分开始 -->
            <div class="tb-con-top">
                <!-- 主题市场 -->
                <h2 class="market">主题市场</h2>
                <!-- 右面的标题 -->
                <ul class="nav">
                    <li class="strong red"><a href="javascript:;">天猫</a></li>
                    <li class="strong red"><a href="javascript:;">聚划算</a></li>
                    <li class="strong green"><a href="javascript:;">天猫超市</a></li>
                    <li><span>|</span></li>
                    <li><a href="javascript:;">司法拍卖</a></li>
                    <li><a href="javascript:;">飞猪旅行</a></li>
                    <li><a href="javascript:;">天天特卖</a></li>
                    <li><span>|</span></li>
                    <li><a href="javascript:;">造点新货</a></li>
                    <li><a href="javascript:;">苏宁易购</a></li>
                    <li><a href="javascript:;">淘宝心选</a></li>
                    <li><a href="javascript:;">智能生活</a></li>
                    <li><a href="javascript:;">淘宝直播</a></li>
                </ul>
            </div>
            <!-- 上边导航部分结束 -->

            <!-- 下边部分开始 -->
            <div class=" clearfix tb-con-down">

                <!-- 左侧导航条 -->
                <div class="menu">
                    <ul>
                        <li class="iconfont icon-nvzhuang">
                            <a href="javascript:;">女装</a>
                            /
                            <a href="javascript:;">内衣</a>
                            /
                            <a href="javascript:;">家具</a>
                        </li>
                        <li class="iconfont icon-wangqiuxie">
                            <a href="javascript:;">女鞋</a>
                            /
                            <a href="javascript:;">男鞋</a>
                            /
                            <a href="javascript:;">箱包</a>
                        </li>
                        <li class="iconfont icon-fushi-muyingwanju-xianxing">
                            <a href="javascript:;">母婴</a>
                            /
                            <a href="javascript:;">童装</a>
                            /
                            <a href="javascript:;">玩具</a>
                        </li>
                        <li class="iconfont icon-nanzhuang
                        ">
                            <a href="javascript:;">男装</a>
                            /
                            <a href="javascript:;">运动户外</a>

                        </li>
                        <li class="iconfont icon-xinnianghuazhuang
                        ">
                            <a href="javascript:;">美妆</a>
                            /
                            <a href="javascript:;">彩妆</a>
                            /
                            <a href="javascript:;">个护</a>
                        </li>
                        <li class="iconfont icon-shouji
                        ">
                            <a href="javascript:;">手机</a>
                            /
                            <a href="javascript:;">数码</a>
                            /
                            <a href="javascript:;">企业</a>
                        </li>
                        <li class="iconfont icon-xiyiji">
                            <a href="javascript:;">大家电</a>
                            /
                            <a href="javascript:;">生活电器</a>

                        </li>
                        <li class="iconfont icon-quqi">
                            <a href="javascript:;">零食</a>
                            /
                            <a href="javascript:;">生鲜</a>
                            /
                            <a href="javascript:;">茶酒</a>
                        </li>
                        <li class="iconfont icon-dunguo">
                            <a href="javascript:;">厨具</a>
                            /
                            <a href="javascript:;">收纳</a>
                            /
                            <a href="javascript:;">清洁</a>
                        </li>
                        <li class="iconfont icon-shafazuoweikongwei">
                            <a href="javascript:;">家纺</a>
                            /
                            <a href="javascript:;">家饰</a>
                            /
                            <a href="javascript:;">鲜花</a>
                        </li>
                        <li class="iconfont icon-mybook">
                            <a href="javascript:;">图书音像</a>
                            /
                            <a href="javascript:;">文具</a>

                        </li>
                        <li class="iconfont icon-yiyaoxiang">
                            <a href="javascript:;">医药保健</a>
                            /
                            <a href="javascript:;">进口</a>

                        </li>
                        <li class="iconfont icon-qiche">
                            <a href="javascript:;">汽车</a>
                            /
                            <a href="javascript:;">二手车</a>
                            /
                            <a href="javascript:;">用品</a>
                        </li>
                        <li class="iconfont icon-fangzidichan">
                            <a href="javascript:;">房产</a>
                            /
                            <a href="javascript:;">装修家具</a>
                            /
                            <a href="javascript:;">建材</a>
                        </li>
                        <li class="iconfont icon-icon-test">
                            <a href="javascript:;">手表</a>
                            /
                            <a href="javascript:;">眼镜</a>
                            /
                            <a href="javascript:;">珠宝饰品</a>
                        </li>
                        <li class="iconfont icon-nvzhuang">
                            <a href="javascript:;">女装</a>
                            /
                            <a href="javascript:;">内衣</a>
                            /
                            <a href="javascript:;">家具</a>
                        </li>

                    </ul>
                </div>
                <!-- 轮播 -->
                <div class="banner">
                    <!-- 轮播开始 -->
                    <div class="clearfix lunbo">
                        <a href="#">
                            <img src="./images/tb-banner.jpeg" alt="">
                        </a>
                        <!-- 绝对定位 椭圆 -->
                        <ul class="tuoyuan">
                            <li><a href="javascript:;"></a></li>
                            <li><a href="javascript:;"></a></li>
                            <li><a href="javascript:;"></a></li>
                            <li><a href="javascript:;"></a></li>
                            <li><a href="javascript:;"></a></li>
                        </ul>

                        <!-- 绝对定位 左箭头 -->
                        <ul class="jiantou-l">
                            <li class=""><a href="javascript:;">&lt;</a></li>
                        </ul>

                        <!-- 绝对定位 右箭头 -->
                        <ul class="jiantou-r">
                            <li class=""><a href="javascript:;">&gt;</a></li>
                        </ul>

                    </div>
                    <!-- 中间文字 -->
                    <div class="wz">
                        <h2>TMALL天猫</h2>
                        <p>理想上天猫</p>
                        <div class="wz1">
                            <p style="color:#ff6396" class="wz2">1</p>
                            <p class="wz2">/5</p>
                        </div>

                    </div>

                    <!-- 轮播下面的图片链接 -->
                    <div class="lunbo-down">
                        <ul>
                            <li><a href="javascript:;">
                                    <img src="./images/tmall01.jpeg" alt="">
                                </a></li>
                            <li><a href="javascript:;">
                                    <img src="./images/tmall02.jpeg" alt="">
                                </a></li>
                        </ul>
                    </div>
                </div>

                <!-- 登录部分 -->
                <div class="login">

                    <!-- 头像开始 -->
                    <a href="#" class="image">
                        <img src="./images/login.jpg" alt="">
                        <!-- 文字内容 -->
                        <p>Hi!
                            <strong>你好</strong>
                        </p>
                    </a>
                    <!-- 头像结束 -->

                    <!-- 按钮部分开始 -->
                    <div class="login-btn">
                        <a href="#" class="login-a">
                            登录
                        </a>
                        <a href="#" class="zhuce">
                            注册
                        </a>
                        <a href="#">
                            开店
                        </a>
                    </div>
                    <!-- 按钮部分结束 -->

                    <!-- 广告图 -->
                    <a href="#">
                        <img src="./images/share.png" alt="" class="yuanjiao">
                    </a>

                    <!-- 公告 -->
                    <div class="notice">
                        <p><strong>公告，新鲜事都在这里</strong></p>
                        <ul>
                            <li><a href="#">
                                    <strong>规则</strong>
                                    奥运知识产权规则解读
                                </a></li>
                            <li><a href="#">
                                    <strong>规则</strong>
                                    奥运知识产权规则解读
                                </a></li>
                            <li><a href="#">
                                    <strong>规则</strong>
                                    奥运知识产权规则解读
                                </a></li>
                        </ul>
                    </div>

                    <!-- 下标 -->
                    <ul class="history">
                        <li><a href="#">
                                <span class="iconfont icon-shoucang1"> </span>
                                <p>收藏的宝贝</p>
                            </a></li>
                        <li><a href="#">
                                <span class="iconfont icon-shoucang1"> </span>
                                <p>收藏的宝贝</p>
                            </a></li>
                        <li><a href="#">
                                <span class="iconfont icon-shoucang1"> </span>
                                <p>收藏的宝贝</p>
                            </a></li>
                        <li><a href="#">
                                <span class="iconfont icon-shoucang1"> </span>
                                <p>收藏的宝贝</p>
                            </a></li>
                    </ul>

                </div>



            </div>
            <!-- 下边部分结束 -->

            <!-- 商品 开始 -->
            <!-- 有好货 开始 -->
            <div class="goods clearfix">
                <h3>
                    有好货
                    <img src="./images/pro.png" alt="">
                </h3>
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p>夏天黄色长裙，穿出温柔的气质，适合夏季秋季穿，拉长线条</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p>夏天黄色长裙，穿出温柔的气质，适合夏季秋季穿，拉长线条</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p>夏天黄色长裙，穿出温柔的气质，适合夏季秋季穿，拉长线条</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p>夏天黄色长裙，穿出温柔的气质，适合夏季秋季穿，拉长线条</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p>夏天黄色长裙，穿出温柔的气质，适合夏季秋季穿，拉长线条</p>
                        </a>
                    </li>
                </ul>

            </div>
            <!-- 有好货 结束 -->

            <!-- 猜你喜欢开始 -->
            <div class="love  clearfix">
                <h3>
                    猜你喜欢
                    <img src="./images/recomend.png" alt="">
                </h3>
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p class="price">
                                <span>￥ 480</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p class="price">
                                <span>￥ 480</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p class="price">
                                <span>￥ 480</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p class="price">
                                <span>￥ 480</span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/pro02.webp" alt="">
                            <h4>婷婷服饰 夏季温柔长裙 气质长裙</h4>
                            <p class="price">
                                <span>￥ 480</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 猜你喜欢结束 -->
            <!-- 商品 结束 -->


            <!-- end开始 -->
            <div class="end">
                END
            </div>
            <!-- end结束 -->

            <!-- 消费者开始 -->
            <div class="xfz">
                <div class="xfz-fd">
                    <span class="iconfont  icon-anquan
                    "></span>
                    <p class="clearfix">消费者保障</p>

                    <ul>
                        <li class="clear-befor"><a href="#">保障范围</a></li>
                        <li><a href="#">退货退款流程</a></li>
                        <li><a href="#">服务中心</a></li>
                        <li><a href="#">更多特色服务</a></li>
                    </ul>
                </div>
                <div class="xfz-fd">
                    <span class="iconfont icon-lianxi2hebing_bangzhu
                    "></span>
                    <p class="clearfix">新手上路</p>

                    <ul>
                        <li class="clear-befor"><a href="#">新手专区</a></li>
                        <li><a href="#">消费警示</a></li>
                        <li><a href="#">交易安全</a></li>
                        <li><a href="#">24小时在线帮助</a></li>
                        <li><a href="#">免费开店</a></li>
                    </ul>
                </div>
                <div class="xfz-fd">
                    <span class="iconfont  icon-fahuofukuan-mianxing
                    "></span>
                    <p class="clearfix">付款方式</p>

                    <ul>
                        <li class="clear-befor"><a href="#">快捷支付</a></li>
                        <li><a href="#">信用卡</a></li>
                        <li><a href="#">余额宝</a></li>
                        <li><a href="#">蚂蚁花呗</a></li>
                        <li><a href="#">货到付款</a></li>
                    </ul>
                </div>
                <div class="xfz-fd">
                    <span class="iconfont  icon-taobaotese
                    "></span>
                    <p class="clearfix">淘宝特色</p>

                    <ul>
                        <li class="clear-befor"><a href="#">手机淘宝</a></li>
                        <li><a href="#">旺旺/旺信</a></li>
                        <li><a href="#">大众评审</a></li>
                    </ul>
                </div>
            </div>
            <!-- 消费者结束 -->

        </div>
        <!-- 内容结束 -->

        <!-- 底部开始 -->
        <div class="footer">
            <div class="w">

                <ul class=" xhx clearfix">
                    <li><a href="#">阿里巴巴集团</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">淘宝网</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">天猫</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">聚划算</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">全球速卖通</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">阿里巴巴国际交易市场</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">1688</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">阿里妈妈</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">飞猪</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">淘小铺</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">阿里云计算</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">AliOS</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">阿里通道</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">一淘</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">万网</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">高速</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">UC</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">友盟</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">阿里安全</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">大麦网</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">钉钉</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">支付宝</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">优酷</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">土豆</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">阿里健康</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">阿里影业</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">网商银行</a></li>
                    <li><span>|</span></li>
                </ul>


                <ul class="clearfix">
                    <li><a href="#">关于淘宝</a></li>
                    <li><a href="#">营销中心</a></li>
                    <li><a href="#">廉正举报</a></li>
                    <li><a href="#">联系客服</a></li>
                    <li><a href="#">开放平台</a></li>
                    <li><a href="#">诚征英才</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">隐私权政策</a></li>
                    <li><a href="#">法律声明</a></li>
                    <li><a href="#">知识产权</a></li>
                    <li><a href="#">不当竞争举报</a></li>
                    <li><a href="#">规则意见征集</a></li>
                    <li><span>|</span></li>
                    <li>&copy;2003-现在 Taobao.com 版权所有</li>
                </ul>
                <ul>
                    <li>增值电信业务经营许可证：浙<B2-20080224></B2-20080224>
                    </li>
                    <li><span>|</span></li>
                    <li>增值电信业务经营许可证（跨地区）：<B2-20150210></B2-20150210>
                    </li>
                    <li><span>|</span></li>
                    <li>浙网文（2019）1033-086号</li>
                    <li><span>|</span></li>
                    <li>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</li>
                    <li><span>|</span></li>
                    <li>互联网药品信息服务资格正数（浙）-经营性-2018-0010</li>
                    <li><span>|</span></li>
                    <li>短消息类服务接入代码使用证书：号【2016】00154-A01</li>
                    <li><span>|</span></li>
                    <li>信息网络传播视听许可证：1109364号</li>
                    <li><span>|</span></li>
                    <li>出版物网络交易平台服务经营备案号：新出发浙备字第002号</li>
                    <li><a href="#">
                            浙公网安备 33010002000078号 </a></li>
                    <li><span>|</span></li>
                    <li><a href="#">浙B2-20080224-1</a></li>
                    <li><span>|</span></li>
                    <li>广播电视节目制作经营许可证（浙）字第01012号</li>
                    <li><span>|</span></li>
                    <li>市场名称登记证：工商网市字3301004120号</li>
                    <li><span>|</span></li>
                    <li>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</li>
                    <li><span>|</span></li>
                    <li><a href="#"><img src="./images/police.jpeg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./images/footer-img01.jpeg" alt=""
                                style="padding-top:15px;display: inline;"></a>
                    </li>
                    <li><a href="#">
                            <img src="./images/footer-img02.png" alt="" style="height:70px;">
                        </a></li>
                </ul>


            </div>

        </div>
        <!-- 底部结束 -->



    </div>
    <!-- 大盒子结束 -->
</body>

</html>